<template>
<!-- 配置中心 -->
  <div class="card-list" v-if="state.visibleCode === 'list'">
    <a-card
      hoverable
      class="cards"
      :bordered="true"
      v-for="(item, idx) in state.cardList"
      :key="item.key"
    >
      <template #cover>
        <img class="front-img" alt="example" :src="item.src" />
      </template>

      <a-card-meta
        @click="
          state.visibleCode = item.key;
          state.card = state.cardList[idx];
        "
      >
        <template #description>
          <div class="title">
            <span>{{ item.name }} </span>
          </div>
          <div style="cursor: pointer">
            {{ item.desc }}
          </div>
        </template>
      </a-card-meta>
    </a-card>
  </div>

  <a-page-header
    v-if="state.visibleCode != 'list'"
    style="border: 1px solid rgb(235, 237, 240)"
    :title="state.card.name"
    :sub-title="state.card.desc"
    @back="state.visibleCode = 'list'"
  />
  <Resource
    v-if="state.visibleCode === 'resource'"
    :moduleId="moduleId"
    :key="state.visibleCode"
  />
  <Network
    v-if="state.visibleCode === 'network'"
    :moduleId="moduleId"
    :key="state.visibleCode"
  />
  <HealthTest
    v-if="state.visibleCode === 'health'"
    :moduleId="moduleId"
    :key="state.visibleCode"
  />
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
import Network from "../config/Network.vue";
import Resource from "../config/Resource.vue";
import HealthTest from "../config/HealthTest.vue";

export default defineComponent({
  name: "buildRecord",
  components: {
    Network,
    Resource,
    HealthTest,
  },
  props: {
    moduleId: {
      type: Number,
      required: false,
    },
  },
  setup(props) {
    const { moduleId } = toRefs(props);
    const state = reactive({
      visibleCode: "list",
      cardList: [
        {
          key: "resource",
          name: "资源配置",
          src: require("@/../static/resource.png"),
          desc: "可以对pod 中每个容器使用的资源进行限制，当前主要为 cpu，内存，副本数和加载卷。",
        },
        {
          key: "network",
          name: "网络设置",
          src: require("@/../static/network.png"),
          desc: " 为pod对象提供一个固定、统一的访问接口及负载均衡的能力，并借助新一代DNS系统的服务发现功能，解决客户端发现并访问容器化应用的问题。",
        },
        {
          key: "health",
          name: "健康检查",
          src: require("@/../static/health.png"),
          desc: " 利用 Liveness 和 Readiness 探测机制设置更精细的健康检查，进而可实现零停机部署,避免部署无效的镜像,更加安全的滚动升级。",
        },
      ],
      card: {},
    });

    const reset = () => {
      state.visibleCode = "list";
    }

    return {
      state,
      reset,
    }
  },
});
</script>

<style lang="less" scoped>
.card-list {
  padding: 0 40px;
  .cards {
    margin: 20px 0;
    padding: 3px 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    cursor: default;
    .front-img {
      width: 50px;
      height: 50px;
      display: inline-block;
      padding: 10px;
      margin-right: -25px;
    }
  }
}
.title {
  font-weight: 600;
  padding: 5px 0;
  cursor: pointer;
  text-align: start;
}
</style>